<template>
  <section class="organization_label_manage_table">
    <el-table stripe
              align="center"
               row-key="id"
              :data="tableData"
              style="width: 100%">
      <el-table-column prop="name" label="标签名称"></el-table-column>
      <el-table-column prop="code" label="标签代码"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch v-if="!scope.row.isSys" :value="scope.row.status"
                     :active-value="1"
                     :inactive-value="2"
                     @change="(val) => handleChange(val, scope.row)"
                     active-color="#13ce66"></el-switch>
                     <span v-if="scope.row.isSys === 1">{{scope.row.status === 1 ? '启用' : '停用'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column width="210"
                       label="操作">
        <template slot-scope="scope" v-if="scope.row.isSys !== 1">
          <el-button
           :disabled="scope.row.status === 2"

                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button class="btn-delete"
                     type="text"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="organization_label_manage_table__pagination" v-if="pagination">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pagination.pageNum"
                     :page-sizes="[10,20,30]"
                     :page-size="pagination.size"
                     layout="prev, pager, next, sizes, jumper"
                     :total="pagination.total"></el-pagination>
    </div>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "organizationLabelManageTable",
  data () {
    return {
      isSizeChange: false
    };
  },
  computed: {
    ...mapGetters({
      tableData: "organizationLabelManage/tableData",
      tableParams: "organizationLabelManage/tableParams",
      pagination: "organizationLabelManage/pagination"
    })
  },
  methods: {
    ...mapActions({
      editLabel: "organizationLabelManage/editLabel",
      fetchTableData: "organizationLabelManage/fetchTableData",
       deleteLabel: "organizationLabelManage/deleteLabel",
      updateStatus: "organizationLabelManage/updateStatus"
    }),
    async handleSizeChange (val) {
      this.isSizeChange = true
      await this.fetchTableData({
        ...this.tableParams,
        size: val,
        page: 1
      })
    },
    async handleCurrentChange (val) {
      if (this.isSizeChange) {
        this.isSizeChange = false
        return
      }
      await this.fetchTableData({
        ...this.tableParams,
        page: val
      })
    },
    handleEdit (index, row) {
      this.editLabel(row);
    },
    handleDelete (index, row) {
     this.$confirm(`确定删除标签${row.name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteLabel(row.id).then(res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      })
    },
    handleChange (val, row) {
      this.$confirm(`确定更改标签${row.name}的状态?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateStatus({
          id: row.id,
          status: val
        }).then(res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '更改状态成功!'
            });
          }
        })

      })
    }
  }
};
</script>
<style scoped>
.organization_label_manage_table {
  margin: 16px 0;
}
.organization_label_manage_table__pagination {
  margin: 16px 0;
  text-align: right;
}
</style>
